<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">

	<title>空白页面</title>
	<link rel="stylesheet" href="../css/mui.min.css" />
	<link rel="stylesheet" href="../css/common.css" />
	<link rel="stylesheet" href="../iconfont/iconfont.css" />
	<style>
		.search {
			background: #FFFFFF;
			position: relative;
		}
		
		.search input[type=text] {
			text-align: center!important;
			background: #efeff4;
			border: none;
		}
		
		.search i {
			font-size: 12px;
			position: absolute;
			left: 50%;
			margin-left: -38px;
			top: 50%;
			margin-top: -11px;
			color: #666;
		}
		
		.search i:before {
			font-size: 16px;
			vertical-align: top;
		}
		
		.text-red {
			color: red;
		}
		
		.classify {
			position: relative;
			color: #FFF;
			height: 149px;
			background: rgba(0, 0, 0, 0.3);
		}
		
		.classify-bg {
			display: block;
			max-width: 100%;
			height: 149px;
			position: absolute;
			top: 0;
			z-index: -1;
		}
		
		.classify-bg img {
			height: 149px;
		}
		
		.classify-level > label {
			border-bottom: 1px solid #FFF;
			letter-spacing: 8px;
		}
		
		.classify-level > div {
			font-size: 12px;
		}
		
		.classify-btn button {
			background: transparent;
			border: 1px solid #FFFFFF;
			padding: 2px;
		}
		
		.classify-second {
			min-height: 50px;
			position: relative;
			font-size: 12px;
			background: #FFFFFF;
		}
		
		.sanjiaoxing {
			position: absolute;
			top: -20px;
			left: 20px;
			border: 10px solid;
			width: 0;
			border-color: transparent transparent #fff transparent;
		}
		
		.all-classify {
			background: #FFF;
			outline: 1px solid #DCDCDC;
			line-height: 40px;
			height: 40px;
			padding: 0;
			margin: 0;
			border-top: 1px solid #DCDCDC;
			font-size: 14px;
		}
	</style>
</head>

<body>
	<!--分类数据 开始-->
	<div class="mui-content mui-scroll-wrapper container-pull-refresh no-pad">
		<div class="mui-scroll">
			<!--数据列表-->
			<section class="mui-table-view mui-row scroll-data" data-tpl="tpl-categories" id="pnl-categories">
				<div class="no-data"><img src="../image/icon-waiting.gif" /></div>
			</section>
		</div>
	</div>
	<!--分类数据 结束-->
	
    <!-- 分类模板 开始 -->
	<script type="text/template" id="tpl-categories">
		{{if !data || data.length == 0}}
		<div class="no-data">
			<center>暂时无数据</center>
		</div>
		{{/if}}
		{{each data as item}}
		<!--一级分类 开始-->
		<div class="mui-row mui-text-center classify">
			<img class="mui-col-xs-12 classify-bg" src="{{item.thumb | image}}" />
			<div class="mui-col-xs-12 mui-block mgn-v-lg classify-level">
				<label class="mui-col-xs-5 pad-v-sm">{{item.name}}</label>
				<div class="mui-col-xs-12 mgn-v-sm">
					{{each item.child as child idx}}
					{{if idx < 3}}
					<label class="mui-col-xs-4 mgn-h category pad-v-sm" data-id="{{child.id}}">{{child.name}}</label>
					{{/if}}
					{{/each}}
				</div>
				<div class="classify-btn">
					<button class="mui-col-xs-5 no-rds mgn-v-sm btn-view-all category" data-id="{{item.id}}">查看全部</button>
				</div>
			</div>
		</div>
		<!--一级分类 结束-->
	
		<!--二级分类 开始-->
		<div class="mui-row mui-text-center second classify-second">
			<div class="sanjiaoxing"></div>
			{{each item.child as child idx}}
			<div class="mui-col-xs-3 mgn-v-sm category pad-v-sm" data-id="{{item.id}}">{{child.name}}</div>
			{{/each}}
		</div>
		<!--二级分类 结束-->
		{{/each}}
	</script>
    <!-- 分类模板 开始 -->
	
	<script type="text/javascript" src="../js/mui.min.js"></script>
	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<script type="text/javascript" src="../js/template.js"></script>
	<script type="text/javascript" src="../js/app.js"></script>
	<script type="text/javascript" src="category.scroll.js" ></script>
</body>
</html>